<template>
  <div class="user-info">
    <div class="lefticon">
      <el-icon class="icon" :size="20"><Bell /></el-icon>
      <el-icon class="icon iconpadd" :size="20"><chat-dot-round /></el-icon>
      <el-icon class="icon" :size="20"><Postcard /><i class="dot"></i></el-icon>
    </div>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar
          :icon="UserFilled"
          :size="30"
          class="usericon"
          src="https://p3-passport.byteacctimg.com/img/user-avatar/72e403715a6353bc6b589bf8a3a2db8c~300x300.image"
        ></el-avatar>
        <span>{{ username ? 'Fhup' : '' }}</span>
      </span>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="exitClick" :icon="CircleClose">
            退出登录
          </el-dropdown-item>
          <el-dropdown-item :icon="InfoFilled" divided>
            用户信息
          </el-dropdown-item>
          <el-dropdown-item :icon="Unlock">系统管理</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
// 封装的 useStore
import { useStore } from '@/store'
import {
  UserFilled,
  CircleClose,
  InfoFilled,
  Unlock
} from '@element-plus/icons-vue'
import LocalCache from '@/utils/cache'
import router from '@/router'
export default defineComponent({
  setup() {
    const store = useStore()
    const username = computed(() => store.state.login.userInfo.name)
    // 退出登录的实现
    const exitClick = () => {
      LocalCache.clearCache()
      router.push('/main')
    }

    return {
      username,
      UserFilled,
      CircleClose,
      InfoFilled,
      Unlock,
      exitClick
    }
  }
})
</script>

<style scoped lang="less">
.user-info {
  display: flex;
  align-items: center;
  .lefticon {
    .iconpadd {
      margin: 0 5px;
    }
    .icon {
      padding: 6px;
      position: relative;
      cursor: pointer;
      &:hover {
        background-color: #f2f2f2;
      }
      .dot {
        position: absolute;
        top: 3px;
        right: 0px;
        z-index: 10;
        width: 6px;
        height: 6px;
        background: red;
        border-radius: 100%;
      }
    }
  }
  .el-dropdown-link {
    margin-left: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .usericon {
      margin: 0 5px;
    }
  }
}
</style>
